<template>
    <div class="csjh_detail">
        <!-- 提问 -->
        <div class="top_box">
            <div class="top flex">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>
                        <nuxt-link to="/">首页</nuxt-link>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>
                        <nuxt-link to="/cswd">小竹问答</nuxt-link>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item v-if="QuizDetail">
                        <nuxt-link
                            :to="`/cswd/type/${questionsInfo.cate_id}/1`"
                        >
                            {{ questionsInfo.cate_name }}
                        </nuxt-link>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item class="bd_title ellipsis1">
                        {{
                            questionsInfo.subtitle
                                ? questionsInfo.subtitle
                                : questionsInfo.title
                        }}
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>

        <div class="main_body flex">
            <div class="left">
                <div class="tp_main">
                    <div v-if="questionsInfo.keyword" class="keyword">
                        <div
                            v-for="(val, idx) in questionsInfo.keyword.split(
                                ','
                            )"
                            :key="idx"
                            class="wt-tags-item"
                        >
                            {{ val }}
                        </div>
                    </div>
                    <h1 class="fz26 c333 margin-t15">
                        {{
                            questionsInfo.subtitle
                                ? questionsInfo.subtitle
                                : questionsInfo.title
                        }}
                    </h1>
                    <div v-if="questionsInfo.abstract" class="abstract">
                        {{ questionsInfo.abstract }}
                    </div>
                    <div class="info c999 flex-align">
                        <no-ssr placeholder="Loading...">
                            <div class="name flex-align mr30">
                                <img
                                    :src="
                                        questionsInfo.avatar
                                            ? questionsInfo.avatar
                                            : 'https://api.xiaozhucaishui.com/assets/img/avatar.png'
                                    "
                                    alt=""
                                />
                                <span class="ml10">{{
                                    questionsInfo.nickname
                                }}</span>
                            </div>
                        </no-ssr>
                        <div class="fz14 mr30">
                            {{ questionsInfo.add_time_text }}
                        </div>
                        <div class="fz14 mr30">
                            {{ questionsInfo.page_view }} 阅读
                        </div>
                        <div
                            class="like flex-align pointer"
                            @click="setCollect"
                        >
                            <img
                                v-if="questionsInfo.is_collect"
                                src="~/assets/images/collection_s.png"
                                alt=""
                            />
                            <img
                                v-if="!questionsInfo.is_collect"
                                src="~/assets/images/collection.png"
                                alt=""
                            />
                            <span class="fz14">收藏</span>
                        </div>
                    </div>
                </div>
                <div v-if="questionsInfo.offiicalreply" class="gf-ask">
                    <img
                        class="fg-ask-img"
                        src="~/assets/images/csjh/fg-ask.png"
                        alt=""
                    />
                    <div class="gf-ask-content">
                        {{ questionsInfo.offiicalreply }}
                    </div>
                </div>
                <div class="line-title">答疑详情</div>

                <div class="chat">
                    <chatList
                        v-if="questionsInfo.id"
                        :quizData="questionsInfo"
                        :curMessageList="curMessageList"
                        :QuizDetail="QuizDetail"
                        :isDetail="true"
                        @previewImg="previewImg"
                    ></chatList>
                </div>

                <!-- 公众号引流 -->
                <!-- <div class="wx-gzh">
                    <div class="wx-gzh-con">
                        <img
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzwd-gzh-code.png"
                            alt=""
                        />
                        <div class="wx-gzh-con-text">
                            <div class="wx-gzh-con-title">免费领取问答券</div>
                            关注公众号，免费领取问答券
                        </div>
                    </div>
                </div> -->

                <div class="likes-comment">
                    <div class="tab" @click="commentShow = !commentShow">
                        <img src="~/assets/images/csjh/comment.png" alt="" />
                        <span
                            >评论{{
                                commentList.length > 0
                                    ? "(" + commentList.length + ")"
                                    : ""
                            }}</span
                        >
                    </div>
                </div>
                <no-ssr placeholder="Loading...">
                    <!-- 网友评论 -->
                    <el-collapse-transition>
                        <div v-show="commentShow">
                            <div class="bottom_box">
                                <div class="input flex-align">
                                    <img
                                        v-if="userInfo"
                                        :src="userInfo.avatar"
                                        alt=""
                                    />
                                    <el-input
                                        v-model="commTxt"
                                        class="comment-input"
                                        placeholder="写下你的评论"
                                    ></el-input>
                                    <el-button
                                        class="submit"
                                        type="primary"
                                        size="mini"
                                        @click="addComment"
                                    >
                                        发布
                                    </el-button>
                                </div>

                                <div v-if="commentList.length > 0">
                                    <div
                                        class="bt_cont"
                                        v-for="(item, index) in commentList"
                                        :key="index"
                                    >
                                        <nuxt-link
                                            :to="`/cswd/user/${item.uid}`"
                                            class="avatar"
                                        >
                                            <img
                                                class="img1"
                                                :src="item.avatar"
                                                alt=""
                                            />
                                            <img
                                                v-if="item.is_major == '1'"
                                                src="~/assets/images/csjh/V.png"
                                                alt=""
                                                class="img2"
                                            />
                                        </nuxt-link>
                                        <div class="comment-info">
                                            <div class="comment-info-top">
                                                <span class="name">{{
                                                    item.nickname
                                                }}</span>
                                                <span class="time">{{
                                                    item.add_time_diff
                                                }}</span>
                                            </div>
                                            <div class="content">
                                                {{ item.content }}
                                            </div>
                                        </div>
                                        <div class="zan-del">
                                            <el-popconfirm
                                                v-if="
                                                    userInfo &&
                                                    userInfo.id == item.uid
                                                "
                                                confirm-button-text="删除"
                                                cancel-button-text="不用了"
                                                icon="el-icon-info"
                                                icon-color="red"
                                                title="这是一段内容确定删除吗？"
                                                @confirm="delMyComment(item)"
                                            >
                                                <span
                                                    slot="reference"
                                                    class="pointer"
                                                    >删除</span
                                                >
                                            </el-popconfirm>
                                        </div>
                                    </div>
                                </div>
                                <div v-else>
                                    <el-empty
                                        description="快来发表你的评论吧~"
                                    ></el-empty>
                                </div>
                            </div>
                        </div>
                    </el-collapse-transition>
                </no-ssr>
                <div v-if="questionsInfo" class="prev-next">
                    <div v-if="questionsInfo.prevdata">
                        <div class="name">
                            上一篇：
                            <nuxt-link
                                :to="`/cswd/${questionsInfo.prevdata.id}.html`"
                                target="_blank"
                                rel="prev"
                            >
                                {{ questionsInfo.prevdata.title }}
                            </nuxt-link>
                        </div>
                        <div>
                            {{
                                questionsInfo.prevdata.add_time_text.substring(
                                    0,
                                    10
                                )
                            }}
                        </div>
                    </div>
                    <div v-if="questionsInfo.nextdata">
                        <div class="name">
                            下一篇：
                            <nuxt-link
                                :to="`/cswd/${questionsInfo.nextdata.id}.html`"
                                target="_blank"
                                rel="next"
                            >
                                {{ questionsInfo.nextdata.title }}
                            </nuxt-link>
                        </div>
                        <div>
                            {{
                                questionsInfo.nextdata.add_time_text.substring(
                                    0,
                                    10
                                )
                            }}
                        </div>
                    </div>
                </div>
                <no-ssr placeholder="Loading...">
                    <nuxt-link to="/service" class="qifuhaibao">
                        <img
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/xzwd.png"
                            alt=""
                        />
                    </nuxt-link>
                </no-ssr>
                <div class="left_bottom">
                    <recommend
                        :readingList="wendaList"
                        titleKey="title"
                        textKey="first_answer"
                    />
                </div>
            </div>
            <no-ssr placeholder="Loading...">
                <div class="right">
                    <div
                        class="right1"
                        :style="{ backgroundImage: `url(${rightBj1})` }"
                    >
                        <div class="ans-info">
                            <img
                                :src="QuizDetail.ans_uid.avatar"
                                class="avatar"
                                alt=""
                            />
                            <div class="info-text">
                                <div class="name">
                                    {{ QuizDetail.ans_uid.nickname }}
                                    <i class="el-icon-success"> 已认证 </i>
                                </div>
                                人工提问更精准
                            </div>
                        </div>
                        <div
                            class="but but1"
                            :class="[is_focus ? 'disabled' : 'but1']"
                            @click="setFollow"
                        >
                            {{
                                followSwitch
                                    ? is_focus
                                        ? "已关注"
                                        : "关注老师"
                                    : ""
                            }}
                            <i
                                v-show="!followSwitch"
                                class="el-icon-loading"
                            ></i>
                        </div>
                        <div
                            class="but but2"
                            @click="
                                goAsk(`/cswd/ask?id=${questionsInfo.ans_uid}`)
                            "
                        >
                            立即提问
                        </div>
                    </div>
                    <div class="lunbo">
                        <el-carousel height="270px">
                            <el-carousel-item>
                                <nuxt-link to="/templates">
                                    <img
                                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/detail_lunbo1.png"
                                        class="lunbo-img"
                                        alt=""
                                    />
                                </nuxt-link>
                            </el-carousel-item>
                            <el-carousel-item>
                                <nuxt-link to="/school/vipzjkc?index=60">
                                    <img
                                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/detail_lunbo2.png"
                                        class="lunbo-img"
                                        alt=""
                                    />
                                </nuxt-link>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div v-if="aboutList.length > 0" class="right3">
                        <div class="right2-top">
                            <span>相似推荐</span>
                        </div>
                        <el-skeleton animated :loading="aboutList.length == 0">
                            <template slot="template">
                                <div
                                    v-for="item in 6"
                                    :key="item"
                                    class="hotItem"
                                >
                                    <el-skeleton-item variant="h1" />
                                </div>
                            </template>
                        </el-skeleton>
                        <div
                            v-for="(item, index) in aboutList"
                            class="hotItem fz14 c333 ellipsis1"
                            :key="index"
                        >
                            <nuxt-link
                                :to="'/cswd/' + item.id + '.html'"
                                target="_blank"
                            >
                                {{ item.title }}
                            </nuxt-link>
                        </div>
                    </div>
                    <!-- <div class="hot-tags">
                    <div class="title">热门标签</div>
                    <div class="tags">
                        <nuxt-link
                            v-for="(item, index) in tagsData"
                            :key="index"
                            :to="'/cswd/cswdcate/' + item"
                            target="_blank"
                            class="tags-item"
                        >
                            <div class="tags-item-title">
                                {{ item }}
                            </div>
                        </nuxt-link>
                    </div>
                </div> -->
                    <!-- <div class="right2">
                    <div class="right2-top">
                        <span>财税专家</span>
                        <div @click="sqzjClick">申请专家</div>
                    </div>
                    <div class="zyls-list">
                        <div
                            v-for="(item, index) in majorList"
                            :key="index"
                            class="zyls-item"
                        >
                            <img :src="item.userinfo.avatar" alt="" />
                            <div class="info">
                                <div class="name">
                                    {{ item.userinfo.nickname }}
                                </div>
                                <div class="type">
                                    {{ item.major_types }}
                                </div>
                                <div class="num">
                                    已回答
                                    {{
                                        item.ans_quiz_count
                                            ? item.ans_quiz_count
                                            : 0
                                    }}人
                                </div>
                            </div>

                            <div
                                class="but"
                                @click="goAsk(`/cswd/ask?id=${item.user_id}`)"
                            >
                                问专家
                            </div>
                        </div>
                    </div>
                </div> -->

                    <!-- <hotTags></hotTags> -->
                    <div class="wx-official-account">
                        <div class="wx-official-account-title">
                            扫一扫立即下载APP
                        </div>
                        <div class="wx-official-account-div">
                            <img
                                src="~/assets/images/index/app_code.png"
                                class="pzbz-img"
                                alt=""
                            />
                            <div>
                                拍照搜题更便捷
                                <div>老师回复第一时间通知</div>
                            </div>
                        </div>
                        <div class="wx-official-account-title">
                            扫码关注公众号
                        </div>
                        <div class="wx-official-account-div">
                            <img
                                src="~/assets/images/index/wx_code.png"
                                class="pzbz-img"
                                alt=""
                            />
                            <div>优惠活动及时知~</div>
                        </div>
                    </div>
                </div>
            </no-ssr>
        </div>
        <no-ssr placeholder="Loading...">
            <el-image
                class="my-img"
                v-show="false"
                ref="myImg"
                src=""
                :preview-src-list="previewList"
            >
            </el-image>
        </no-ssr>
    </div>
</template>

<script>
import {
    getQuizDetail_chat,
    setLike_chat,
    delMyComment_chat,
    addCommentSubmit_chat,
    setLikecomment_chat,
    setCollect_chat,
    getquizcount_chat,
    major_select,
    getWendaList,
    getKeywordList,
    getOtherUserHomeInfo,
    setFollow,
} from "@/assets/api/csjhApi";
import { getanalysedata2 } from "@/assets/api/indexApi";

import { escape2Html, goTopSmooth } from "@/assets/utils/utils";

import { mapState, mapMutations } from "vuex";

import caina from "@/assets/images/csjh/caina.png";
import iocn from "@/assets/images/csjh/iocn.png";
import zan0 from "@/assets/images/csjh/zan_0.png";
import zan1 from "@/assets/images/csjh/zan_1.png";
import rightBj1 from "@/assets/images/csjh/dnld/right-bj1.png?v=1";

//推荐问答组件
import recommend from "@/components/recommendedReading/index-wd.vue";
import sideItem from "@/components/csjh/sideItem";
// import hotTags from "@/components/csjh/hotTags";
import chatList from "@/components/csjh/chatList";

function showMessage(first_answer) {
    if (first_answer && first_answer.length > 0) {
        let messages = "";
        for (let item of first_answer) {
            let msg = JSON.parse(item.message);

            if (msg.extendedData.type == 111) messages = messages + "[表情]，";
            else if (msg.extendedData.type == 11)
                messages = messages + "[图片]，";
            else messages = messages + JSON.parse(item.message).message + "，";
        }
        return messages;
    } else {
        return "";
    }
}

export default {
    components: {
        sideItem,
        // hotTags,
        chatList,
        recommend,
    },
    async asyncData({ params }) {
        let data = {
            wendaList: [],
            commentList: [], // 评论列表
            metaTitle: "小竹问答",
            metaDescription: "",
            curMessageList: [],
            questionsInfo: {},
            QuizDetail: false,
            id: params.id.replace(".html", ""),
            tagsData: [],
            aboutList: [],
            keywords: "",
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/cswd/",
                images: [""],
                title: "",
                description: "",
                pubDate: "2024-03-14",
                upDate: "2024-03-14",
            },
        };

        data.jsonld["@id"] += params.id;

        let paramsData = {
            quiz_id: data.id,
            status: 3,
        };
        var res = await getQuizDetail_chat(paramsData);
        if (res.code == 1) {
            data.QuizDetail = res.data;
            data.QuizDetail.quiz.info_images =
                data.QuizDetail.quiz.info_images.split(",");
            data.QuizDetail.quiz.info_images =
                data.QuizDetail.quiz.info_images.filter((item) => item);

            data.questionsInfo = data.QuizDetail.quiz;

            for (let item of data.QuizDetail.chatroomtext) {
                try {
                    let str = escape2Html(item.message);
                    let message = JSON.parse(str);
                    message.is_supplement = item.is_supplement;
                    data.curMessageList.push(message);
                } catch (error) {
                    // console.log("getJhmjDetail1", error);
                }
            }

            if (data.questionsInfo.nextdata)
                data.questionsInfo.nextdata.add_time_text =
                    data.questionsInfo.nextdata.add_time_text.substring(0, 10);
            if (data.questionsInfo.prevdata)
                data.questionsInfo.prevdata.add_time_text =
                    data.questionsInfo.prevdata.add_time_text.substring(0, 10);
            data.jsonld.pubDate = data.jsonld.upDate =
                data.questionsInfo.add_time_text;

            data.metaTitle = data.questionsInfo.subtitle
                ? data.questionsInfo.subtitle
                : data.questionsInfo.title;
            data.metaDescription = data.questionsInfo.abstract;
            data.keywords = data.questionsInfo.keyword;
            data.commentList = data.QuizDetail.comment;
        }

        const res1 = await getWendaList({});
        if (res1.code == 1) {
            data.wendaList = res1.data;
        }

        // const res2 = await getWdTags({});
        // if (res2.code == 1) {
        //     data.tagsData = res2.data.slice(0, 20);
        // }
        // if (data.keywords) {
        //     const res3 = await getKeywordList({
        //         keyword: data.keywords,
        //     });
        //     if (res3.code == 1) {
        //         let arr = res3.data.filter((val) => {
        //             return data.id != val.id;
        //         });
        //         data.aboutList = arr.splice(0, 6);
        //     }
        // }

        return data;
    },
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.metaTitle + "-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.keywords,
                },
                {
                    hid: "description",
                    name: "description",
                    content: this.metaDescription,
                },
            ],
        };
    },
    layout: "home",
    data() {
        return {
            // metaTitle: "小竹问答",
            // metaDescription: "",
            caina: caina,
            iocn: iocn,
            zan0: zan0,
            zan1: zan1,
            rightBj1: rightBj1,
            commTxt: "",
            // id: "",
            c_sort: "",
            title: "",
            sortList: [
                { name: "按时间倒序", index: "1" },
                { name: "按时间正序", index: "2" },
            ],
            activeIndex: 0, //排序下标
            // questionsInfo: {},
            answerInfo: {},
            // commentList: [], // 评论列表
            connectList: [], // 提问列表
            selectdAnswerList: [],

            commentShow: true, // 评论显示

            previewList: [], // 图片预览

            // curMessageList: [],

            askFormData: {},

            // QuizDetail: false,

            count: 0,
            majorList: [],

            is_focus: 0,
            followSwitch: true,

            // wendaList: [],
        };
    },
    created() {
        // this.getWendaList();
    },
    mounted() {
        goTopSmooth();
        // this.id = this.$route.params.id.replace(".html", "");
        // this.selectdAnswer();
        this.updataJhmjDetail();
        this.setmenuIndex("2");
        // this.major_select();
        // this.getAboutList();
        this.getquizcount_chat();
        getanalysedata2({
            m_id: 4,
            type: 1,
            describe: this.metaTitle,
            code: "PC7",
        });
        if (localStorage.getItem("token")) this.getOtherUserHomeInfo(); // 获取是否关注老师
        // if (!localStorage.getItem("token")) {
        //     this.setloginShow(true);
        // }
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    methods: {
        ...mapMutations("common", ["setloginShow", "setmenuIndex"]),

        async getOtherUserHomeInfo() {
            const res = await getOtherUserHomeInfo({
                uid: this.questionsInfo.ans_uid,
            });
            this.followSwitch = true;

            if (res.code == 1) {
                this.is_focus = res.data.is_focus;
            }
        },

        // 关注/取消
        async setFollow() {
            if (!this.followSwitch) return;
            this.followSwitch = false;
            const res = await setFollow({
                uid: this.questionsInfo.ans_uid,
            });

            if (res.code == 1) {
                this.$message({
                    message: this.is_focus == 1 ? "取消关注" : "关注成功",
                    type: "success",
                });
                this.getOtherUserHomeInfo();
            }
        },

        //获取热门标签
        async getTagsList() {
            // const res = await getWdTags({});
            // if (res.code == 1) {
            //     this.tagsData = res.data.slice(0, 20);
            // }
        },

        //获取相似问题
        async getAboutList() {
            if (!this.keywords) return;
            const res = await getKeywordList({
                keyword: this.keywords,
            });
            if (res.code == 1) {
                let arr = res.data.filter((val) => {
                    return this.id != val.id;
                });
                this.aboutList = arr.splice(0, 6);
            }
        },

        // 精选老师
        async major_select() {
            if (sessionStorage.getItem("major_select"))
                this.majorList = JSON.parse(
                    sessionStorage.getItem("major_select")
                );
            else {
                const res = await major_select({});
                if (res.code == 1) {
                    sessionStorage.setItem(
                        "major_select",
                        JSON.stringify(res.data)
                    );
                    this.majorList = res.data;
                }
            }
        },

        // 获取累计解决问题数
        async getquizcount_chat() {
            if (sessionStorage.getItem("getquizcount_chat"))
                this.count = sessionStorage.getItem("getquizcount_chat");
            else {
                const res = await getquizcount_chat({});
                if (res.code == 1) {
                    sessionStorage.setItem("getquizcount_chat", res.data);
                    this.count = res.data;
                }
            }
        },

        //获取精选数据
        // async selectdAnswer() {
        //     let res = await getJhmjList({ sort: 0 });
        //     this.selectdAnswerList = res.data;
        // },
        // 获取详情数据
        async getJhmjDetail() {
            try {
                let params = {
                    quiz_id: this.$route.params.id.replace(".html", ""),
                    status: 3,
                };
                var res = await getQuizDetail_chat(params);
                this.QuizDetail = res.data;
                let data = this.QuizDetail;
                data.quiz.info_images = data.quiz.info_images.split(",");
                data.quiz.info_images = data.quiz.info_images.filter(
                    (item) => item
                );

                // this.questionsInfo = data.quiz;

                for (let item of data.chatroomtext) {
                    try {
                        let str = escape2Html(item.message);
                        // let str = item.message;
                        // str = str.replace(/\r/g,'\\r')
                        // str = str.replace(/\n/g,'\\n')
                        // str = str.replace(/\s/g,'\\s')
                        let message = JSON.parse(str);
                        message.is_supplement = item.is_supplement;
                        this.curMessageList.push(message);
                        // this.curMessageList.push(JSON.parse(str));
                    } catch (error) {
                        console.log("getJhmjDetail1", error);
                    }
                }
                if (data.quiz.title) {
                    this.metaTitle = data.quiz.title;
                    this.metaDescription = showMessage(data.chatroomtext);
                }
                // this.answerInfo = data.answer;
                // this.connectList = data.connect;
                this.commentList = data.comment;
                getanalysedata2({
                    m_id: 4,
                    type: 1,
                    describe: this.metaTitle,
                    code: "PC7",
                });
            } catch (error) {
                console.log("getJhmjDetail", error);
            }
        },

        //请求推荐问答列表
        async getWendaList() {
            const res = await getWendaList({});
            if (res.code == 1) {
                this.wendaList = res.data;
            }
        },

        // 去精选详情
        gojxDetail(item) {
            console.log("父组件接受的", item);
            let { href } = this.$router.resolve({
                path: "/cswd/" + item.id + ".html",
            });
            window.open(href, "_blank");
        },

        // 更新详情数据
        async updataJhmjDetail() {
            try {
                var params = { quiz_id: this.id, status: 0 };
                let { code, data } = await getQuizDetail_chat(params);
                if (code == 1) {
                    this.QuizDetail = data;
                    data.quiz.info_images = data.quiz.info_images.split(",");
                    data.quiz.info_images = data.quiz.info_images.filter(
                        (item) => item
                    );
                    this.questionsInfo = data.quiz;

                    // this.answerInfo.is_like = data.quiz.is_like;
                    // this.answerInfo = data.answer;
                    // this.connectList = data.connect;
                    // this.this.commentList = []
                    this.commentList = data.comment;
                }
            } catch (error) {
                console.log("updataJhmjDetail", error);
            }
        },

        // 收藏
        async setCollect() {
            try {
                let res = await setCollect_chat({ quiz_id: this.id });
                console.log("收藏", res);
                if (res.code == 1) {
                    this.$message({
                        message: this.questionsInfo.is_collect
                            ? "取消收藏"
                            : "收藏成功",
                        type: "success",
                    });
                    // this.updataJhmjDetail();
                    if (this.questionsInfo.is_collect) {
                        this.questionsInfo.is_collect = 0;
                    } else {
                        this.questionsInfo.is_collect = 1;
                    }
                }
            } catch (error) {
                console.log("setCollect", error);
            }
        },
        // 点赞问题
        async setLike() {
            try {
                const res = await setLike_chat({
                    quiz_id: this.questionsInfo.id,
                });
                if (res.code == 1) {
                    this.updataJhmjDetail();
                    // if (this.questionsInfo.is_like) {
                    //     this.questionsInfo.is_like = 0;
                    // } else {
                    //     this.questionsInfo.is_like = 1;
                    // }
                }
            } catch (error) {
                console.log("setLike", error);
            }
        },
        // 点赞评论
        async likeComment(item) {
            try {
                var params = {
                    commentid: item.id,
                };
                let res = await setLikecomment_chat(params);
                if (res.code == 1) {
                    this.$message({
                        message: this.questionsInfo.is_like
                            ? "取消点赞"
                            : "点赞成功",
                        type: "success",
                    });
                    this.updataJhmjDetail();
                }
            } catch (error) {
                console.log("likeComment", error);
            }
        },

        //发布评论
        async addComment() {
            try {
                if (!this.commTxt) {
                    this.$message({
                        message: "评论内容不能为空",
                        type: "warning",
                    });
                    return;
                }
                var params = {
                    quiz_id: this.questionsInfo.id,
                    content: this.commTxt,
                };
                let res = await addCommentSubmit_chat(params);
                if (res.code == 1) {
                    this.commTxt = "";
                    this.updataJhmjDetail();
                }
            } catch (error) {
                console.log("addComment", error);
            }
        },
        //删除自己的评论
        async delMyComment(item) {
            console.log("删除评论请求参数", item.id);
            let res = await delMyComment_chat({ comment_id: item.id });
            console.log("删除评论", res);
            if (res.code == 1) {
                this.$message({
                    message: "删除成功",
                    type: "success",
                });
                this.updataJhmjDetail();
            }
        },

        //鼠标移入
        onMouseOver(item, index) {
            this.showTipsIndex = index;
        },
        //鼠标移出
        onMouseOut() {
            this.showTipsIndex = -1;
        },

        // 预览图片
        previewImg(imgs) {
            this.previewList = imgs;
            this.$refs.myImg.showViewer = true;
        },

        // 点击申请专家
        sqzjClick() {
            this.$alert("申请专业人士请前往小竹财税app", "提示", {
                confirmButtonText: "确定",
            });
        },

        goAsk(path = "/chatgpt/xzcsgpt") {
            if (this.userInfo)
                this.$router.push({
                    path: path,
                });
            else
                this.$confirm("需要登录后提问", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        window.localStorage.removeItem("token");
                        window.localStorage.removeItem("userInfo");
                        window.location.href =
                            "/login?url=" +
                            window.location.pathname +
                            window.location.search;
                    })
                    .catch(() => {});
        },
    },
};
</script>

<style lang="scss">
.csjh_detail {
    .lunbo {
        width: 326px;
        margin-left: 13px;
        margin-bottom: 14px;
        .lunbo-img {
            width: 100%;
            height: 270px;
        }
    }
    .top_box {
        width: 1200px;
        margin: 0 auto;
        //   height: 293px;

        .top {
            padding: 17px 0;
            width: 860px;
            height: 60px;
            align-items: center;
            border-bottom: 1px solid #f0f0f2;
            color: #666666;
            font-size: 14px;
            //   padding-top: 33px;

            .title {
                padding-right: 6px;
                padding-left: 2px;
            }

            .bd_title {
                width: 388px;
            }
        }
    }
    .main_body {
        width: 1200px;
        margin: 0 auto;
        margin-bottom: 20px;

        .left {
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            width: 860px;
            // margin: 12px 0;
            overflow: hidden;

            .tp_main {
                background-color: #fff;
                padding: 24px 36px;
                border-radius: 6px;
                margin-bottom: 19px;
                .keyword {
                    display: flex;
                    flex-wrap: wrap;
                    .wt-tags-item {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        // cursor: pointer;
                        min-width: 30px;
                        padding: 2px 10px;
                        height: 26px;
                        color: #1772f6;
                        background-color: #e7f1fe;
                        font-size: 12px;
                        border-radius: 75px;
                        margin-right: 8px;
                    }
                }
                .abstract {
                    margin-top: 10px;
                    background-color: #f9f9f9;
                    color: #666;
                    font-size: 14px;
                    padding: 8px 16px;
                }
                .info {
                    margin-top: 24px;

                    .name {
                        img {
                            width: 32px;
                            height: 32px;
                            border-radius: 50%;
                            object-fit: cover;
                        }
                    }

                    .like {
                        img {
                            width: 18px;
                            height: 18px;
                            margin-right: 3px;
                        }
                    }

                    .leaf {
                        margin-left: 200px;
                    }
                }
            }

            .middle_box {
                position: relative;
                padding: 30px 40px;
                width: 860px;
                //   height: 293px;
                background-color: #fff;
                border-radius: 10px;

                .md_title {
                    img {
                        margin-right: 10px;
                        width: 55px;
                        height: 55px;
                        border-radius: 50%;
                    }

                    .name {
                        img {
                            margin-left: 6px;
                            margin-right: 5px;
                            width: 16px;
                            height: 16px;
                        }

                        .level {
                            cursor: pointer;
                            text-align: center;
                            width: 39px;
                            height: 16px;
                            line-height: 16px;
                            background: linear-gradient(
                                308deg,
                                #a1c1e6 0%,
                                #dfeeff 100%
                            );
                            border-radius: 67px;
                            color: #fff;
                            font-size: 12px;
                        }
                    }

                    .focus {
                        cursor: pointer;
                        text-align: center;
                        margin-left: 50px;
                        line-height: 28px;
                        width: 67px;
                        height: 28px;
                        background: #ffffff;
                        border-radius: 82px;
                        border: 1px solid #1c87f3;
                        color: #1c87f3;
                        font-size: 14px;
                    }

                    .caina {
                        position: absolute;
                        top: -30px;
                        right: 20px;
                        width: 100px;
                        height: 100px;
                    }
                }

                .md_content {
                    margin-bottom: 20px;
                    padding: 30px;
                    padding-left: 63px;
                    line-height: 25px;

                    .like {
                        width: 100px !important;

                        img {
                            width: 25px;
                            height: 25px;
                        }
                    }
                }

                .md_askAnswer {
                    padding-left: 63px;

                    .md_bg {
                        background-color: #f9f9f9;
                        padding: 20px;

                        .name {
                            img {
                                margin-left: 6px;
                                margin-right: 5px;
                                width: 35px;
                                height: 35px;
                                border-radius: 50%;
                                object-fit: cover;
                            }
                        }

                        .quizItem {
                            padding-bottom: 20px;
                            background-color: #f9f9f9;
                            border-bottom: 1px solid #ececec;

                            .content {
                                margin-top: 10px;
                            }
                        }

                        .md_answer {
                            padding: 30px 0;
                            background-color: #f9f9f9;

                            .name {
                                img {
                                    margin-left: 6px;
                                    margin-right: 5px;
                                    width: 35px;
                                    height: 35px;
                                    border-radius: 50%;
                                    object-fit: cover;
                                }
                            }

                            .quizItem {
                                padding-bottom: 20px;
                                background-color: #f9f9f9;
                                border-bottom: 1px solid #ececec;

                                .content {
                                    margin-top: 10px;
                                }
                            }
                        }
                    }
                }
            }

            .bottom_box {
                padding: 30px 45px;
                background-color: #fff;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;

                .input {
                    img {
                        margin-right: 20px;
                        width: 50px;
                        min-width: 50px;
                        height: 50px;
                        border-radius: 50%;
                        object-fit: cover;
                    }
                }

                .submit {
                    width: 78px;
                    height: 36px;
                    border-radius: 4px;
                }

                .comment-input {
                    &::v-deep .el-input__inner {
                        width: 598px;
                        height: 36px;
                    }
                }

                .bt_tit {
                    .sort {
                        cursor: pointer;
                    }

                    // .sort span:hover {
                    //   color: #333;
                    // }
                }

                .bt_cont {
                    margin-top: 25px;
                    padding-bottom: 20px;
                    border-bottom: 1px solid #efefef;
                    display: flex;
                    align-items: flex-start;
                    justify-content: space-between;

                    .avatar {
                        margin-right: 20px;
                        position: relative;

                        .img1 {
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            object-fit: cover;
                        }

                        .img2 {
                            width: 15px;
                            height: 15px;
                            border-radius: 10px;
                            position: absolute;
                            z-index: 1;
                            bottom: 1px;
                            right: 1px;
                        }
                    }

                    .comment-info {
                        width: 100%;
                        padding-top: 3px;

                        .comment-info-top {
                            display: flex;
                            align-items: center;

                            .name {
                                font-size: 12px;
                                font-weight: 500;
                                color: #333333;
                            }

                            .time {
                                padding-left: 14px;
                                font-size: 12px;
                                color: #9eacb6;
                            }
                        }

                        .content {
                            font-size: 14px;
                            color: #333333;
                            padding-top: 10px;
                        }
                    }

                    .zan-del {
                        min-width: 25px;
                        margin-top: 3px;
                        font-size: 12px;
                        color: #666666;
                        text-align: right;

                        .zan {
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;
                            font-size: 16px;
                            color: #666666;
                            padding-bottom: 6px;
                            cursor: pointer;

                            img {
                                width: 20px;
                                height: 20px;
                            }
                        }
                    }
                }
            }

            .left_bottom {
                margin-top: 20px;
                border-radius: 6px;
            }
        }

        .right {
            // margin-top: 12px;
        }
    }

    .c1BA {
        color: #1baa6f;
    }

    .el-breadcrumb__inner.is-link {
        font-weight: normal;
    }

    .ask {
        margin-top: 13px;
    }

    .line-title {
        height: 63px;
        line-height: 64px;
        font-size: 18px;
        color: #333333;
        border-bottom: 1px solid #f3f3f3;
        padding-left: 13px;
        background-color: #ffffff;

        &::before {
            content: "";
            display: inline-block;
            width: 3px;
            height: 20px;
            background: #1c87f3;
            position: relative;
            top: 2px;
            left: -12px;
        }
    }

    .chat {
        background: #ffffff;
    }

    .likes-comment {
        background: #ffffff;
        display: flex;
        align-items: center;
        border-top: 1px solid #f4f4f4;
        height: 65px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;

        .tab {
            margin-left: 37px;
            font-size: 14px;
            color: #7a8f9a;
            display: flex;
            align-items: center;
            cursor: pointer;

            img {
                width: 24px;
                height: 24px;
                margin-right: 4px;
            }
        }
    }

    .gf-ask {
        padding: 29px 24px;
        position: relative;
        background-color: #ffffff;
    }

    .gf-ask-content {
        background: #fffaf1;
        border-radius: 6px;
        padding: 30px;
        font-size: 14px;
        color: #968360;
        line-height: 28px;
    }

    .fg-ask-img {
        width: 80px;
        height: 80px;
        position: absolute;
        top: 1px;
        right: 19px;
    }

    .right1 {
        position: sticky;
        z-index: 10;
        top: 97px;
        width: 326px;
        height: 300px;
        border-radius: 10px;
        padding-top: 34px;
        box-sizing: border-box;
        margin-left: 13px;
        margin-bottom: 14px;

        .ans-info {
            width: 277px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            .avatar {
                width: 100px;
                min-width: 100px;
                height: 100px;
                border-radius: 100px;
                object-fit: cover;
            }
            .info-text {
                margin-left: 9px;
                font-weight: 500;
                font-size: 20px;
                color: #333333;
                .name {
                    padding-bottom: 22px;
                    font-weight: 500;
                    font-size: 21px;
                    color: #333333;
                    i {
                        position: relative;
                        bottom: 3px;
                        font-weight: 400;
                        font-size: 12px;
                        display: inline-block;
                        height: 19px;
                        line-height: 21px;
                        padding: 0 10px;
                        color: #1b8dff;
                        background: rgba(32, 144, 255, 0.1);
                        border-radius: 5px;
                        border: 1px solid #1b8dff;
                        margin-left: 4px;
                    }
                }
            }
        }

        .but {
            width: 277px;
            height: 52px;
            border-radius: 50px;
            overflow: hidden;
            font-size: 22px;
            color: #ffffff;
            line-height: 52px;
            text-align: center;
            cursor: pointer;
            margin: 0 auto;
            margin-top: 20px;
            &:hover {
                opacity: 0.8;
            }
        }
        .but1 {
            background: #1b8dff;
        }
        .disabled {
            height: 52px;
            line-height: 50px;
            background: rgba(27, 141, 255, 0.5);
            border: 1px solid #1b8dff;
        }
        .but2 {
            background: linear-gradient(90deg, #ff6116 0%, #ff8729 100%);
        }
    }

    .right3 {
        width: 327px;
        margin-left: 13px;
        background: #ffffff;
        border-radius: 10px;
        margin-bottom: 13px;
        .right2-top {
            height: 95px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 25px;
            border-bottom: 1px solid #ededed;
            span {
                font-size: 28px;
                color: #333333;
            }
        }
        .hotItem {
            cursor: pointer;
            padding: 0 30px;
            width: 100%;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #f5f5f5;
            background: #fff;
            color: #333;
            font-size: 18px;
            &:hover {
                color: #1c87f3 !important;
                text-decoration: underline;
            }
        }
    }

    .hot-tags {
        margin-left: 13px;
        margin-top: 14px;
        background-color: #fff;
        border-radius: 10px;
        padding: 24px 25px;
        margin-bottom: 19px;
        width: 326px;
        .title {
            font-size: 28px;
            color: #333;
            font-weight: 500;
        }
        .tags {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            .tags-item {
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                margin-bottom: 20px;
                min-width: 30px;
                padding: 2px 10px;
                height: 26px;
                background-color: #f6f6f6;
                color: #333;
                font-size: 12px;
                border-radius: 75px;
                margin-right: 8px;
                &:hover {
                    color: #1772f6;
                    background-color: #e7f1fe;
                }
            }
        }
    }

    .right2 {
        width: 327px;
        margin-left: 13px;
        background: #ffffff;
        border-radius: 10px;
        margin-bottom: 13px;

        .right2-top {
            height: 95px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px 0 36px;
            border-bottom: 1px solid #ededed;

            span {
                font-size: 28px;
                color: #333333;
            }

            div {
                cursor: pointer;
                width: 93px;
                height: 32px;
                background: #ededed;
                border-radius: 50px;
                font-size: 16px;
                color: #666666;
                line-height: 32px;
                text-align: center;

                &:hover {
                    background: #fff0e9;
                    color: #e36225;
                }
            }
        }

        .zyls-list {
            padding: 0 25px;
        }

        .zyls-item {
            border-bottom: 1px solid #eaeaea;
            padding: 30px 0;
            display: flex;
            align-items: center;
            position: relative;

            img {
                width: 80px;
                height: 80px;
                border-radius: 4px;
                object-fit: cover;
            }

            .info {
                padding-left: 14px;

                .name {
                    font-size: 18px;
                    font-weight: 500;
                    color: #333333;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 122px;
                }

                .type {
                    font-size: 14px;
                    color: #666666;
                    padding: 9px 0;
                }

                .num {
                    font-size: 14px;
                    color: #999999;
                }
            }

            .but {
                position: absolute;
                right: -6px;
                top: 21px;
                width: 77px;
                height: 30px;
                border-radius: 50px;
                border: 1px solid #333333;
                font-size: 14px;
                color: #333333;
                line-height: 30px;
                text-align: center;
                cursor: pointer;

                &:hover {
                    background: #ff8025;
                    border-color: #ff8025;
                    color: #ffffff;
                }
            }
        }
    }

    .prev-next {
        background-color: #ffffff;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        padding: 0 45px 10px;
        font-size: 14px;
        color: #999999;

        > div {
            padding-bottom: 10px;

            display: flex;
            justify-content: space-between;
            .name {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 600px;
            }
        }

        > div:hover {
            a {
                text-decoration: underline;
            }
        }
    }

    .wx-gzh {
        border-top: 1px solid #f4f4f4;
        padding: 45px 0;
        background-color: #ffffff;
        .wx-gzh-con {
            margin: 0 auto;
            width: 437px;
            height: 138px;
            background: #fff9e6;
            border: 4px solid #faf1d5;
            display: flex;
            align-items: center;
            img {
                width: 100px;
                height: 100px;
                margin-left: 22px;
            }
            .wx-gzh-con-text {
                font-size: 16px;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 400;
                color: #8a8164;
                line-height: 23px;
                margin-left: 14px;
                padding-bottom: 20px;
            }
            .wx-gzh-con-title {
                font-size: 21px;
                font-weight: 500;
                color: #ff4646;
                line-height: 30px;
                padding-bottom: 9px;
            }
        }
    }

    .wx-official-account {
        margin-left: 13px;
        width: 326px;
        background: #ffffff;
        border-radius: 10px;
        font-size: 14px;
        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
        font-weight: 400;
        color: #333333;
        margin-top: 15px;
        padding: 2px 18px 18px 15px;
        .wx-official-account-title {
            font-weight: 700;
            font-size: 23px;
            color: #020c17;
            padding: 10px 0;
        }
        .wx-official-account-div {
            display: flex;
            align-items: center;
        }
        .line {
            height: 1px;
            background-color: #e5e5e5;
            margin: 11px 0;
        }
        span {
            color: #fa5151;
        }
        img {
            width: 90px;
            height: 90px;
            margin-right: 10px;
            display: block;
        }
    }

    .qifuhaibao {
        margin-top: 20px;
        display: block;
        img {
            width: 100%;
            height: auto;
            cursor: pointer;
        }
    }

    .margin-t15 {
        margin-top: 15px;
    }
}
</style>